<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="username">
        <el-input v-model="ruleForm.username" style="width: 200px" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile" style="width: 200px" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select
          v-model="ruleForm.formOfEmployment"
          placeholder="请选择聘用形式"
        >
          <el-option
            v-for="item in hireType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 时间 -->
      <el-form-item label="转正时间" required class="block">
        <el-date-picker
          v-model="ruleForm.correctionTime"
          type="date"
          placeholder="请选择转正时间"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="入职时间" required class="block">
        <el-date-picker
          v-model="ruleForm.timeOfEntry"
          type="date"
          placeholder="请选择入职时间"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="ruleForm.workNumber" style="width: 50%" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input
          v-model="ruleForm.departmentName"
          style="width: 50%"
          @focus="departmentNameFocus"
        />
        <div v-show="showTree">
          <el-tree
            :data="treeData"
            :props="{ label: 'name' }"
            @node-click="nodeClick"
          />
        </div>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="hCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validmobile } from '@/utils/validate'
import EmployeeEnum from '@/constant/employees'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import { addEmployee } from '@/api/employees'
export default {
  data() {
    const validatemobile = (rule, value, callback) => {
      if (validmobile(value)) {
        callback()
      } else {
        callback(new Error('手机号格式不对'))
      }
    }
    return {
      showTree: false, // 否显示部门列表这颗树
      hireType: EmployeeEnum.hireType, // 雇佣形式
      treeData: [],
      ruleForm: {
        username: '',
        mobile: '',
        correctionTime: '', // 转正时间
        timeOfEntry: '', // 入职
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '' // 部门
      },
      rules: {
        username: [
          { required: true, message: '不能为空', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: true, message: '不能为空', trigger: ['blur', 'change'] },
          { validator: validatemobile, trigger: ['blur', 'change'] }
          // { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'change'] }
        ],
        correctionTime: [
          {
            type: 'date',
            required: true,
            message: '不能为空',
            trigger: ['blur', 'change']
          }
        ],
        formOfEmployment: [
          { required: true, message: '不能为空', trigger: ['blur', 'change'] }
        ],
        workNumber: [
          { required: true, message: '不能为空', trigger: ['blur', 'change'] }
        ],
        departmentName: [
          { required: true, message: '不能为空', trigger: ['blur', 'change'] }
        ],
        timeOfEntry: [{
          type: 'date',
          required: true,
          message: '不能为空',
          trigger: ['blur', 'change']
        }]
      }
    }
  },
  created() {

  },
  methods: {
    // 如果当前部门还有子部门，则不能选中
    nodeClick(data, node) {
      console.log('用户在部门结构树上点击', data, node)
      if (data.children.length) {
        return
      }
      console.log('选中的是', data.name)
      this.ruleForm.departmentName = data.name
      this.showTree = false
    },
    // 部门 获取焦点后有信息
    departmentNameFocus() {
      this.loadDepartments()
      this.showTree = true
    },
    async loadDepartments() {
      const res = await getDepartments()
      this.treeData = tranListToTreeData(res.data.depts)
      console.log('转换树形后列表', this.treeData)
    },

    // 新增员工
    async doAdd() {
      try {
        const res = await addEmployee(this.ruleForm)
        console.log('新增加的员工', res)
        this.$message.success('操作成功!')
        // 1 .通知父组件去关闭弹层
        this.$emit('closes')
        // 2. 通知父组件去更新表格数据
        this.$emit('updateEmpolyee')
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 取消
    hCancel() {
      this.$emit('closes')
    },
    // 关闭
    exit() {
      this.ruleForm = {
        username: '',
        mobile: '',
        correctionTime: '', // 转正时间
        timeOfEntry: '', // 入职
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '' // 部门
      }
      this.$refs.ruleForm.resetFields()
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return
        }
        this.doAdd()
      })
    }
  }
}
</script>

<style>
</style>
